<template>
    <view class="list-container">
        <template v-if="data && data.length > 0">
            <view class="title-box" v-for="(item, index) in data" :key="item.id" v-show="!item.hide">
                <view class="title">
                    <view class="txt-box">
                        <text class="txt u-line-1">{{item.hide}}{{ item.name }}-</text>
                        <text class="txt u-line-1">{{ item.empno }}</text>
                    </view>
                    <u-tag :text="item.selected ? '取消':'选中'" :plain="!!item.selected"
                        @click="toggle(item, index)"></u-tag>
                </view>
            </view>
        </template>
        <template v-else>
            <view class="info-box">
                <Empty />
            </view>
        </template>
    </view>
</template>

<script>
    import {
        setPageData
    } from "@/store/user";
    import Empty from "@/components/empty";
    import {
        getUserInfo,
    } from "@/store/user.js";

    export default {
        components: {
            Empty,
        },
        props: {
            localData: {
                type: Array,
                default: () => [],
            },
            multiple: {
                type: Boolean,
                default: true,
            },
        },
        data() {
            return {
                loading: true,
                noData: false,
                data: [],
            };
        },
        watch: {
            localData: {
                handler: function(val) {
                    this.data = val;
                },
                deep: true,
                immediate: true,
            },
        },
        methods: {
            toggle(item) {
                if(this.multiple){
                    item.selected = !item.selected;
                }else{
                    this.data.forEach(item => item.selected = false);
                    item.selected = true;
                }
                this.$emit('change', this.data.filter(item => item.selected));
            },
            unselected(item) {
                item.selected = false;
                this.$emit('change', this.data.filter(item => item.selected));
            }
        }
    };
</script>

<style lang="scss" scoped>
    .list-container {
        height: 100%;
        overflow: scroll;
        background-color: #fff;

        .title {
            font-size: 32rpx;
            padding: 10px 40rpx;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            align-items: center;

            .txt-box {
                display: flex;
                flex: 1;
                margin: 0 10px;
            }

            .txt {
                max-width: 50%;
            }

            .tag-box {
                display: flex;
                align-items: center;
            }
        }
    }
</style>